import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { Node } from '@tiptap/core'
import './style.scss'

// 定义自定义高亮节点
const HighlightNode = Node.create({
  name: 'aiHighlight',

  group: 'block',

  content: 'text*',

  defining: true,

  parseHTML() {
    return [
      {
        tag: 'div[data-type="ai-highlight"]'
      }
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return [
      'div',
      {
        ...HTMLAttributes,
        'data-type': 'ai-highlight',
        style:
          'background-color: #3b82f6; color: white; padding: 4px 8px; border-radius: 4px; margin-bottom: 8px; display: inline-block; font-weight: bold;'
      },
      'AI编程'
    ]
  },

  addCommands() {
    return {
      insertAIHighlight:
        () =>
        ({ commands }) => {
          return commands.insertContent({
            type: this.name,
            content: [
              {
                type: 'text',
                text: 'AI编程'
              }
            ]
          })
        }
    }
  }
})

const TiptapEditorWithHighlight = () => {
  const editor = useEditor({
    extensions: [StarterKit, HighlightNode],
    content: `
        <div data-type="ai-highlight"></div>
        <p>这里是编辑器的其他内容，您可以继续输入...</p>
    `,
    immediatelyRender: false
  })

  return (
    <div className="editor-container" style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '16px' }}>
      <EditorContent editor={editor} />
    </div>
  )
}

export default TiptapEditorWithHighlight
